<template>
  <div class="member-level">
    <Row type='flex' justify="end" class="add">
      <Col><Button type="primary" @click="skipAdd" v-if="hasPermission('moms:member:benefiscreate')">新建权益</Button></Col>
      <Col style="margin-left:30px;" v-if="hasPermission('moms:member:benefisetting')"><Button type="default" @click="skipRule">规则设置</Button></Col>
    </Row>
    <Row>
      <Col>
        <Table stripe :columns="columnsList" :data="memberRightsList" class="table-list">
          <template slot-scope="{ row }" slot="level">
            V{{row.memberLevel}}
          </template>
          <template slot-scope="{ row }" slot="action">
            <i class="iconsys iconedit" title="编辑" @click='skipEdit(row)' v-if="hasPermission('moms:member:benefisupdate')"></i>
            <Poptip  confirm title="你确定要删除吗？"   @on-ok="del(row)" style="text-align:left" v-if="hasPermission('moms:member:benefisdelete')">
              <i class="iconsys icondel" title="删除"></i>
            </Poptip>
          </template>
        </Table>
      </Col>
    </Row>
  </div>
</template>

<script>
import { getMemberRightsList, delMemberRights } from '@/api/member/index'
export default {
  name: 'member_rights_list',
  data () {
    return {
      columnsList: [
        {
          title: '序号',
          type: 'index',
          width: 100
        },
        {
          title: '权益名称',
          key: 'rightsName'
        },
        {
          title: '权益简介',
          key: 'instructions'
        },
        {
          title: '可用等级',
          slot: 'level'
        }
      ],
      memberRightsList: []
    }
  },
  methods: {
    getList () {
      getMemberRightsList({
        merchantId: this.$store.state.user.merchantId
      }).then(res => {
        if (res.data.status === 200) {
          this.memberRightsList = res.data.data
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    skipRule () {
      this.$router.push({ name: 'member_rights_rule' })
    },
    skipAdd () {
      this.$router.push({ name: 'member_rights_add' })
    },
    skipEdit (row) {
      this.$router.push({ name: 'member_rights_edit',
        params: {
          id: row.memberRights
        }
      })
    },
    del (row) {
      delMemberRights({
        memberRights: row.memberRights
      }).then(res => {
        if (res.data.status === 200) {
          this.$Message.success('删除成功')
          this.getList()
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    }
  },
  created () {
    if (this.hasPermission(['moms:member:benefisupdate', 'moms:member:benefisdelete'])) {
      this.columnsList.push({
        title: '操作',
        width: 150,
        slot: 'action',
        align: 'left'
      })
    }
    this.getList()
  }
}
</script>

<style lang='less'>
  .member-level{
    .ivu-form .ivu-form-item-label{
      display: none !important;
    }
    .ivu-form-item{
      margin-bottom: 0;
    }
    .ivu-modal-header{
      border-bottom: none;
    }
    .ivu-modal-footer{
      border-top: none;
    }
    .add{
      padding: 24px 15px;
      .ivu-btn-primary {
        width: 80px;
      }
    }
  }
</style>
